/* eslint-disable prettier/prettier */
import React from 'react';
import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
import styles from './DialogStyles';
const ResultDialog = ({ success,visible, toshop, tostudy }) => {
  if (!visible) {return null;}

  const resultImageSource = success ? require('../../src/image/chapter_dialog_success_component.png') : require('../../src/image/chapter_dialog_fail_component.png');
  const resultTextStyle = success ? styles.successText : styles.failureText;
  const resultButtontoshop = success ? require('../../src/image/chapter_dialog_shop_component.png') : require('../../src/image/chapter_dialog_fail_shop_component.png');
  const resultButtontostudy = success ? require('../../src/image/chapter_dialog_learn_component.png') : require('../../src/image/chapter_dialog_fail_learn_component.png');
  const resultButtontitle = require('../../src/image/chapter_dialog_text_component.png');

  return (
    <View style={styles.dialogContainer}>
      <Image source={resultImageSource} style={success ? styles.resulttitle  : styles.resultImage } />
      { success ? (<View style={[styles.resulttitle]}>
        <View style={{justifyContent:'center',alignContent: 'center',}}>
        <Image source={resultButtontitle} style={{justifyContent: 'center',alignContent: 'center',width: '100%',resizeMode: 'contain',}}/>
        <Text style={[styles.buttonText]}>星星x4</Text>
        </View>
      </View>) : null}
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, styles.successButton]}
          onPress={ toshop}
        >
          <Image source={resultButtontoshop} style={styles.resultButton} />
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.button, styles.failureButton]}
          onPress={tostudy}
        >
          <Image source={resultButtontostudy} style={styles.resultButton} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

 

export default ResultDialog;
